<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <style type="text/css">
        #intro_control {
            cursor: pointer;
            font-size: 12px;
            font-weight: bold;
        }

    </style>
    <!-- 注意：千万不要单独引入这类和父级公用的js文件，不然父级没法操控子级hide！！！血泪教训 -->
    <!--
    <script src="lib/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="codeSeven-toastr/build/toastr.min.js"></script>
    <script src="lib/bootstrap-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    -->
    <script src="js/left_bottom_panel/recentUploadFunction.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/right_bottom_panel/rightBottomPanelMineFunction.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/right_bottom_panel/rightBottomPanelIndexFunction.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>
<div class="modal-header">
    <!-- 关闭按钮的代号&times -->
    <!-- 加上data-dismiss就有关闭效果了!点&times或者页面其它地方就可以关闭按钮了! -->
    <button id="close_btn" class="close" data-dismiss="modal" style="display: none">&times;</button>
    <div class="col-xs-4 col-sm-3">
        <h2>文件上传</h2>
    </div>
    <div class="col-xs-8 col-sm-9">
        <div id="intro_control">关于文件上传的介绍 <span id="intro_dis_icon"
                                                class="glyphicon glyphicon-chevron-down"></span></div>
        <p style="color: #969493;display: none;" id="intro">
            0.&ensp;<span style="color: #e44e4e;">若要上传文件，请先登录；</span> <br>
            1.&ensp;请注意，上传文件大小不能超过5GB大小；<br>
            2.&ensp;如是多个文档文件，请压缩成压缩包进行上传； <br>
            3.&ensp;请注意填写文件名，文件的简略介绍，给他人提供参考；<br>
            4.&ensp;注意："-&#45;&#45;请选择-&#45;&#45;"部分，你上传的文件所处的类别，由它决定；<br>
            5.&ensp;在上传文件途中点击"取消"会造成文件上传终止；<br>
            6.&ensp;在文件上传成功之后右上角会出现"x"点击关闭即可，也可点击取消进行关闭。 <br>
            7.&ensp;<span style="color: #e44e4e;">以下输入文件描述以及文件名时：一个中文等于两个字符，一个英文字母等于一个字符。 </span><br>
        </p>
    </div>


</div>
<div class="modal-body">

    <div class="row">
        <form role="form" style="font-family: 华文新魏;">
            <div class="form-group col-xs-offset-1 col-xs-3" style="padding-left: 0px;">
                <input id="fileDescribeName" name="fileDescribeName" class="form-control" type="text" placeholder="文件名(30个字符以内，勿输入空格)" onkeyup="javascript:checkFileDescribeName(this);" onmousedown="javascript:checkFileDescribeName(this);">
            </div>
            <span style="float:left; font-family: Georgia; font-size: 24px;" id="inputWordCheck">30</span>
            <div class="col-xs-offset-1 col-xs-2">
                <select class="form-control" id="level1" name="option1">
                    <option disabled selected>---请选择---</option>
                </select>
            </div>
            <div class="col-xs-2">
                <select class="form-control" id="level2" name="option2">
                    <option disabled selected>---请选择---</option>
                </select>
            </div>
            <div class="form-group col-xs-offset-1 col-xs-10" style="padding-left: 0px;">
                <!--style="overflow-y: scroll"-->
                <textarea class="form-control"
                          rows="3"
                          placeholder="请输入文件简略介绍（140字中文以内或者280个英文字符）"
                          onkeyup="javascript:checkFileDescribe(this);"
                          onmousedown="javascript:checkFileDescribe(this);"
                          id="fileDescribe"
                          name="fileDescribe"></textarea>
            </div>
            <div>
                还可以输入<span style="font-family: Georgia; font-size: 26px;" id="areaWordCheck">280</span>个字
            </div>
        </form>

    </div>
    <br>
    <div class="row">
        <!-- 样式1 -->
        <!--显示选中的名字-->
        <!--form-control使宽度等于100% 或者auto-->
        <input id='location' class="col-xs-offset-1 col-xs-6  file_loc" disabled>
        <input type="button" id="i-check" value="浏览" class="btn col-xs-offset-1 col-xs-2"
               onclick="$('#i-file').click();">
        <input type="file" name="file" id='i-file' onchange="$('#location').val($('#i-file').val());"
               style="display: none">
        <!-- <input type="file" name="file" id="file" style="display: none"/>
         <button class="btn btn-success fileinput-button" type="button">上传</button>-->

        <div class="col-xs-10 col-xs-offset-1">
            <div class="row">
                <br/>
                <span id="time"></span>
                <br/>
                <!--进度条-->
                <div class="col-xs-6"
                     style="padding-left: 0; padding-right: 0; margin-bottom: 0px;">
                    <div class="progress progress-striped active" style="display: none;">
                        <div id="progressBar" class="progress-bar"
                             role="progressbar" aria-valuemin="0" aria-valuenow="0"
                             aria-valuemax="100" style="width: 20%"></div>
                    </div>
                </div>

                <!-- 显示上传速度 -->
                <div id="showInfo" class="col-xs-6"></div>
                <br><br>
                <!-- 显示文件信息 -->
                <div id="showFieInfo" class="row">
                    <label name="upfileName"></label><br/>
                    <label name="upfileSize"></label><br/>
                    <label name="upfileType"></label><br/>
                </div>
                <input class="btn btn-primary" type="button" name="upload" value="上传"/>
                <input class="btn btn-primary" type="button" name="cancelUpload" value="取消"/>


            </div>

        </div>

    </div>
</div>
<div class="modal-footer">
    &copy blog.mzywucai.club
</div>
<!-- 使用javascript控制对话框的打开和关闭 -->
<script type="text/javascript">


    /*
     * toast-bottom-right表示下右、
     * toast-bottom-center表示下中、
     * toast-top-center表示上中等，更过位置信息请查看文档。
     */

    // toastr.options.positionClass = 'toast-top-center';
    var $level1 = $("#level1");
    var $level2 = $("#level2");
    /*
    1  toastr.success('提交数据成功');
    2  toastr.error('Error');
    3  toastr.warning('只能选择一行进行编辑');
    4  toastr.info('info');
    */

    $("#intro_control").click(function () {
        var intro = document.getElementById('intro');
        if (intro.style.display == 'none') {
            $("#intro_dis_icon").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
            intro.style.display = 'block';
        } else {
            intro.style.display = 'none';
            $("#intro_dis_icon").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
        }
    });



    $.getJSON("/api/fileCategory/levelOne",
        function (json) {
            if (json.code != 0) {
                toastr.error('系统错误！');
            } else {
                // console.log(json);
                $level1.empty();
                var str = "<option disabled selected>---请选择---</option>";
                for (var i = 0; i < json.data.length; i++) {
                    str += "<option value='" + json.data[i].key + "'>" + json.data[i].value + "</option>";
                }
                $level1.append(str);
            }
        });


    $level1.change(function () {
        // console.log('change');
        // console.log("val = " + $level1.val());
        // console.log("text = " + $level1.text());
        var val = $level1.val();
        $.getJSON("/api/fileCategory/levelTwo/" + val,
            function (json) {
                if (json.code != 0) {
                    toastr.error('系统错误！');
                } else {
                    // console.log(json);
                    $level2.empty();
                    var str = "<option disabled selected>---请选择---</option>";
                    for (var i = 0; i < json.data.length; i++) {
                        str += "<option value='" + json.data[i].key + "'>" + json.data[i].value + "</option>";
                    }
                    $level2.append(str);
                }
            });
    });

    var input_maxstrlen = 30;
    var area_maxstrlen = 280;

    function Q(s) { return document.getElementById(s); }

    function checkFileDescribeName(c) {
        len = input_maxstrlen;
        var str = c.value;
        myLen = getStrleng(str, len);
        var wck = Q("inputWordCheck");

        if (myLen > len) {
            c.value = str.substring(0, i + 1);
            wck.innerHTML = 0;
        }
        else {
            wck.innerHTML = Math.floor(len - myLen);
        }
    }

    function checkFileDescribe(c) {
        len = area_maxstrlen;
        var str = c.value;
        myLen = getStrleng(str, len);
        var wck = Q("areaWordCheck");

        if (myLen > len) {
            c.value = str.replace(/^\s+|\s+$/g,"").substring(0, i + 1);
            wck.innerHTML = 0;
        } else {
            wck.innerHTML = Math.floor(len - myLen);

        }
    }

    function getStrleng(str, maxstrlen) {
        myLen = 0;
        i = 0;
        for (; (i < str.length) && (myLen <= maxstrlen); i++) {
            // console.log(str.charCodeAt(i));
            if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
                myLen += 1;
            } else {
                myLen += 2;
                // console.log("myLen = "+myLen);
            }
        }
        return myLen;
    }

    /*$(function () {
        $('#login-modal').modal({
            show: true, // show：是否显示出来，我们的对话框默认不显示出来才对。
            backdrop: 'static',
            keyboard: false, // backdrop：背景的颜色，是否遮罩，这里我们选择true，有遮罩的颜色。
        });
    });*/

    var fileBtn = $("input[name=file]");
    var processBar = $("#progressBar");
    var uploadBtn = $("input[name=upload]");
    var cancelUploadBtn = $("input[name=cancelUpload]");
    var ot;//上传开始时间
    var oloaded;//已上传文件大小
    var xhr; // XMLHttpRequest

    fileBtn.change(function () {
        var fileObj = fileBtn.get(0).files[0]; //js获取文件对象
        if (fileObj) {
            var fileSize = getSize(fileObj.size);
            $("label[name=upfileName]").text('文件名：' + fileObj.name);
            $("label[name=upfileSize]").text('文件大小：' + fileSize);
            $("label[name=upfileType]").text('文件类型：' + fileObj.type);
            uploadBtn.attr('disabled', false);
        }
    });
    // 上传文件按钮点击的时候
    uploadBtn.click(function () {
        // 进度条归零
        setProgress(0);
        // 上传按钮禁用
        // $(this).attr('disabled', true);
        // 进度条显示
        showProgress();
        // 上传文件
        uploadFile();
    });

    // console.log(xhr);
    cancelUploadBtn.click(function () {
        // $('#upload-modal').modal('show');

        $('#upload-modal').modal('hide');

        if (typeof xhr != "undefined") {
            cancelUpload();
        }

    });



    function uploadFile() {
        var url = "/api/user/upload";
        var fileObj = fileBtn.get(0).files[0];
        if (fileObj == null) {
            toastr.warning("请选择文件");
            return;
        }

        // console.log($("input[name=fileDescribeName]").val()); // 文件名人为描述
        if ($("input[name=fileDescribeName]").val() == null ||
            $("input[name=fileDescribeName]").val().replace(/^\s+|\s+$/g,"") == "") {
            toastr.warning('请输入文件名');
            return;
        }
        // console.log($("#level1").val()); // 文件的大类别一
        if ($("#level1").val() == null) {
            toastr.warning('请选择文件类别');
            return;
        }
        // console.log($("#level2").val()); // 文件的小类别二
        if ($("#level2").val() == null) {
            toastr.warning('请选择文件类别');
            return;
        }
        $("#close_btn").attr("style", "display: none;");

        // 上传按钮禁用
        uploadBtn.attr('disabled', true);

        // console.log($("input[name=fileDescribeName]").val()); // 文件的描述名
        // console.log($("textarea[name=fileDescribe]").val()); // 文件的描述
        // console.log($("#level1").val()); // 文件的描述
        // console.log($("#level2").val()); // 文件的描述

        var fileDescribeName = $("input[name=fileDescribeName]").val();
        var fileDescribe = $("textarea[name=fileDescribe]").val();
        var fileOriginName = fileObj.name; // 文件名
        var fileCategoryLevel2Id = $("#level2").val();
        var fileCategoryLevel1Id = $("#level1").val();
        var fileSize = getSize(fileObj.size); // 文件大小
        var fileType = fileObj.type; // 文件类型

        // console.log(fileOriginName+", "+fileSize+", "+fileType);


        // FormData 对象
        var form = new FormData();
        form.append('file', fileObj); // 文件对象
        form.append('fileDescribeName', fileDescribeName);
        form.append('fileDescribe', fileDescribe);
        form.append('fileOriginName', fileOriginName);
        form.append('fileCategoryLevel2Id', fileCategoryLevel2Id);
        form.append('fileCategoryLevel1Id', fileCategoryLevel1Id);
        form.append('fileSize', fileSize);
        form.append('fileType', fileType);



        // XMLHttpRequest 对象
        xhr = new XMLHttpRequest();

        //true为异步处理
        xhr.open('post', url, true);
        // xhr.setRequestHeader("Authorization", "lsnu12345");
        xhr.setRequestHeader("Type", fileCategoryLevel1Id);

        //上传开始执行方法
        xhr.onloadstart = function () {
            // console.log('开始上传')
            ot = new Date().getTime();   //设置上传开始时间
            oloaded = 0;//已上传的文件大小为0
        };

        xhr.upload.addEventListener('progress', progressFunction, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCanceled, false);
        xhr.send(form);

        function progressFunction(evt) {
            // debugger;
            if (evt.lengthComputable) {
                var completePercent = Math.round(evt.loaded / evt.total * 100)
                    + '%';
                processBar.width(completePercent);
                processBar.text(completePercent);

                var time = $("#time");
                var nt = new Date().getTime();     //获取当前时间
                var pertime = (nt - ot) / 1000;        //计算出上次调用该方法时到现在的时间差，单位为s
                ot = new Date().getTime();          //重新赋值时间，用于下次计算

                var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b
                oloaded = evt.loaded;               //重新赋值已上传文件大小

                //上传速度计算
                var speed = perload / pertime;//单位b/s
                var bspeed = speed;
                var units = 'b/s';//单位名称
                if (speed / 1024 > 1) {
                    speed = speed / 1024;
                    units = 'k/s';
                }
                if (speed / 1024 > 1) {
                    speed = speed / 1024;
                    units = 'M/s';
                }
                speed = speed.toFixed(1);
                //剩余时间
                var resttime = ((evt.total - evt.loaded) / bspeed).toFixed(1);
                if (resttime > 60 * 60) {
                     var hour = parseInt(resttime / (60 * 60));
                     var min = parseInt(resttime % (60 * 60) / 60);
                     var second = parseInt(resttime % 60);

                    $("#showInfo").html(speed + units + '，剩余时间：' + hour + 'h&ensp;' + min + 'min&ensp;' + second + 's');
                } else if (resttime > 60) {
                    var min = parseInt(resttime % (60 * 60) / 60);
                    var second = parseInt(resttime % 60);

                    $("#showInfo").html(speed + units + '，剩余时间：'+ min + 'min&ensp;' + second + 's');
                } else {
                    $("#showInfo").html(speed + units + '，剩余时间：' + resttime + 's');
                }


            }
        }

        //上传成功后回调
        function uploadComplete(evt) {
            // console.log(evt);
            // console.log(evt.target.responseText);

            /*
            var con = confirm("确认删除？");
            console.log(con);
            */
            // console.log("上传成功回调："+evt.target.responseText);
            var res = evt.target.responseText;
            var json = JSON.parse(res);
            // console.log(json.msg);

            if (json.code == 0) {
                toastr.success(json.msg);
                $("#close_btn").attr("style", "display: block;");
                // document.getElementById('close_btn').style.display="block";

                uploadBtn.attr('disabled', false);



                // console.log(document.title == "我的");
                // console.log(document.title == "文件系统首页");
                if (document.title == "我的") {
                    // 表格
                    var $fileTableList = $("#fileTableList");
                    // 当前页
                    var $currentPage = $("#currentPage");
                    // 总页数
                    var $totalPage = $("#totalPage");
                    // 总记录数
                    var $totalCount = $("#totalCount");
                    // 重载表单
                    mineTableShow($fileTableList, $currentPage, $totalPage, $totalCount);
                    // 重载：recentUpload
                    reloadRecentUpload();
                }
                if (document.title == "文件系统首页") {
                    // 表格
                    var $fileTableList = $("#fileTableList");
                    // 当前页
                    var $currentPage = $("#currentPage");
                    // 总页数
                    var $totalPage = $("#totalPage");
                    // 总记录数
                    var $totalCount = $("#totalCount");
                    // 重载表单
                    tableShow($fileTableList, $currentPage, $totalPage, $totalCount);
                    // 重载：recentUpload
                    reloadRecentUpload();
                }



                setTimeout(function () {
                    $("#showInfo").html("上传完成");
                }, 2000);
            } else if (json.code == 1) {
                toastr.warning(json.msg);
            } else {
                toastr.error(json.msg);
            }

            setTimeout(function () {
                var $level1 = $("#level1");
                var $level2 = $("#level2");
                var $location = $("#location");

                $level1.empty().append("<option disabled selected>---请选择---</option>");
                $level2.empty().append("<option disabled selected>---请选择---</option>");
                $location.val('');
                $("#fileDescribeName").val('');
                $("#fileDescribe").val('');

                setProgress(0);

                $.getJSON("/api/fileCategory/levelOne",
                    function (json) {
                        if (json.code != 0) {
                            toastr.error('系统错误！');
                        } else {
                            // console.log(json);
                            $level1.empty();
                            var str = "<option disabled selected>---请选择---</option>";
                            for (var i = 0; i < json.data.length; i++) {
                                str += "<option value='" + json.data[i].key + "'>" + json.data[i].value + "</option>";
                            }
                            $level1.append(str);
                        }
                    });
            }, 5000);

            // console.log('上传完成')
        }

        //上传失败回调
        function uploadFailed(evt) {
            // console.log(evt);
            // console.log(evt.target.responseText);
            toastr.error('上传失败，请先登录再进行操作');

            $("#close_btn").attr("style", "display: block;");
            // document.getElementById('close_btn').style.display="block";

            uploadBtn.attr('disabled', false);
            // console.log("上传失败回调："+evt);
            // var res = evt.target.responseText;
            // var json = JSON.parse(res);

            // console.log(json);
            // toastr.error(json.msg);
            // console.log('上传失败' + evt.target.responseText);

            setTimeout(function () {
                var $level1 = $("#level1");
                var $level2 = $("#level2");
                var $location = $("#location");

                $level1.empty().append("<option disabled selected>---请选择---</option>");
                $level2.empty().append("<option disabled selected>---请选择---</option>");
                $location.val('');
                $("#fileDescribeName").val('');
                $("#fileDescribe").val('');

                setProgress(0);

                $.getJSON("/api/fileCategory/levelOne",
                    function (json) {
                        if (json.code != 0) {
                            toastr.error('系统错误！');
                        } else {
                            console.log(json);
                            $level1.empty();
                            var str = "<option disabled selected>---请选择---</option>";
                            for (var i = 0; i < json.data.length; i++) {
                                str += "<option value='" + json.data[i].key + "'>" + json.data[i].value + "</option>";
                            }
                            $level1.append(str);
                        }
                    });
            }, 5000);
        }


        //上传取消后回调
        function uploadCanceled(evt) {
            toastr.warning('上传取消' + evt.target.responseText);
            console.log('上传取消,上传被用户取消或者浏览器断开连接:' + evt.target.responseText);
        }

    }

    //终止上传
    function cancelUpload() {
        xhr.abort();
    }


    function getSize(size) {
        var fileSize = '0KB';
        if (size > 1024 * 1024 * 1024) {
            fileSize = ((size / (1024 * 1024 * 1024))).toFixed(2).toString() + 'GB';
        } else if (size > 1024 * 1024) {
            fileSize = (Math.round(size / (1024 * 1024))).toString() + 'MB';
        } else {
            fileSize = (Math.round(size / 1024)).toString() + 'KB';
        }
        return fileSize;
    }

    function setProgress(w) {
        processBar.width(w + '%');
    }

    function showProgress() {
        processBar.parent().show();
    }

    function hideProgress() {
        processBar.parent().hide();
    }
</script>
</body>
</html>